<template>
  <div :id="echarts" :style="getheight" class="backtran"></div>
</template>
<script>
import echarts from 'echarts'
export default {
  name: 'gauge',
  mixins: [],
  computed: {
    echarts() {
      return 'echarts' + Math.random() * 100000
    },
    getheight() {
      return `height:${this.height}px`
    }
  },
  props: {
    height: {
      type: Number,
      default: 340
    },
    name: {
      type: String,
      default: ''
    },
    value: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: ''
    }
  },
  watch: {
    value() {
      this.draw()
    }
  },
  data() {
    return {
      list: [],
      option: {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        grid: { top: '30px', left: '30px', right: '30px', bottom: '30px' },
        series: [
          {
            name: '业务指标',
            type: 'gauge',
            radius: '100%',
            startAngle: 200,
            endAngle: -20,
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: [[0.09, 'lime'], [0.82, '#1e90ff'], [1, '#ff4500']],
                width: 3
              }
            },
            axisLabel: {
              // 坐标轴小标记
              fontWeight: 'bolder',
              color: '#fff'
            },
            axisTick: {
              // 坐标轴小标记
              length: 15, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: 'auto',
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            splitLine: {
              // 分隔线
              length: 25, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                width: 3,
                color: '#fff'
              }
            },
            pointer: {
              // 分隔线
              shadowColor: '#fff', //默认透明
              shadowBlur: 5
            },
            title: {
              textStyle: {
                fontWeight: 'bolder',
                fontSize: 20,
                color: '#fff',
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            detail: {
              offsetCenter: [0, '30%'], // x, y，单位px
              textStyle: {
                color: '#fff'
              },
              formatter: '{value}%'
            },
            data: []
          }
        ]
      }
    }
  },
  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      const chartFactor = this.$echarts.init(
        document.getElementById(this.echarts)
      )
      let data = [{ value: this.value, name: this.name }]
      this.option.series[0].data = data
      chartFactor.setOption(this.option)
    }
  }
}
</script>
<style lang="scss" scoped>
.backtran {
  padding-top: 30px;
  background-color: transparent;
}
</style>